<template>
  <div class="player" v-if="listItem">
    <div class="player-img">
      <img
        :src="`${
          listItem?.album?.picUrl || listItem?.al?.picUrl || listItem.picUrl
        }?imageView=1&type=webp&thumbnail=247x0`"
        alt=""
      />
    </div>
    <div class="my-text player-song">
      <div class="my-text player-text">{{ listItem?.name }}</div>
      <div class="progess">
        <label>
          <input
            ref="input"
            type="range"
            @input="sloveTimeHandler"
            @touchstart="isFollow = false"
            :max="duration"
          />
          <div class="progess-show" ref="progessshow"></div>
        </label>
      </div>
      <div class="control">
        <div class="control-left" @click="$emit('preListen')">
          <svg
            t="1670414990799"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3312"
            width="200"
            height="200"
          >
            <path
              d="M538.288 198.624l-11.312-11.312a16 16 0 0 0-22.64 0L187.312 504.336a16 16 0 0 0 0 22.64L504.336 844a16 16 0 0 0 22.64 0l11.312-11.312a16 16 0 0 0 0-22.624l-294.4-294.4 294.4-294.4a16 16 0 0 0 0-22.64z"
              p-id="3313"
            ></path>
          </svg>
        </div>
        <div class="control-midle">
          <div @click="sloveStatus">
            <svg
              v-if="isStopPlay"
              t="1670328082575"
              class="icon1"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2926"
              width="200"
              height="200"
            >
              <path
                d="M505.6 1016C235.2 1016 14.4 795.2 14.4 524.8S233.6 32 505.6 32s491.2 220.8 491.2 491.2-220.8 492.8-491.2 492.8z m0-920C268.8 96 76.8 288 76.8 524.8c0 235.2 192 427.2 427.2 427.2s427.2-192 427.2-427.2C932.8 288 740.8 96 505.6 96z"
                fill="#717071"
                p-id="2927"
              ></path>
              <path
                d="M408 737.6c-4.8 0-9.6-1.6-14.4-3.2-11.2-4.8-17.6-16-17.6-28.8V318.4c0-11.2 6.4-22.4 17.6-28.8 11.2-4.8 22.4-4.8 33.6 1.6l289.6 193.6c9.6 6.4 14.4 16 14.4 27.2s-4.8 20.8-14.4 27.2L425.6 732.8c-4.8 3.2-11.2 4.8-17.6 4.8z m32-358.4v267.2L641.6 512l-201.6-132.8z"
                fill="#717071"
                p-id="2928"
              ></path>
            </svg>
            <svg
              v-else
              t="1670327942041"
              class="icon2"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2644"
              width="200"
              height="200"
            >
              <path
                d="M511.5 888c208 0 376.7-168.5 376.7-376.3S719.6 135.4 511.5 135.4c-208 0-376.7 168.5-376.7 376.3 0.1 207.8 168.7 376.3 376.7 376.3z m0 70.9c-247.2 0-447.7-200.2-447.7-447.2S264.2 64.5 511.5 64.5c247.2 0 447.6 200.2 447.6 447.2 0.1 247-200.4 447.2-447.6 447.2z m0 0"
                p-id="2645"
              ></path>
              <path
                d="M420 652c-19.8 0-36-16.2-36-36V408c0-19.8 16.2-36 36-36s36 16.2 36 36v208c0 19.8-16.2 36-36 36zM612 652c-19.8 0-36-16.2-36-36V408c0-19.8 16.2-36 36-36s36 16.2 36 36v208c0 19.8-16.2 36-36 36z"
                p-id="2646"
              ></path>
            </svg>
          </div>
        </div>
        <div class="control-right" @click="$emit('nextListen')">
          <svg
            t="1670414905348"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3173"
            width="200"
            height="200"
          >
            <path
              d="M340.688 830.24l11.312 11.328a16 16 0 0 0 22.624 0L685.76 530.448a16 16 0 0 0 0-22.64L374.624 196.688a16 16 0 0 0-22.624 0l-11.312 11.312a16 16 0 0 0 0 22.624l288.496 288.496-288.496 288.512a16 16 0 0 0 0 22.624z"
              p-id="3174"
            ></path>
          </svg>
        </div>
      </div>
    </div>
    <div class="player-progress" @click="changeListen" ref="changeListen">
      <svg
        v-if="howListen == '随'"
        t="1670656443627"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2676"
        width="200"
        height="200"
      >
        <path
          d="M170.71 724.37c-17.38 0-31.82-14.21-31.82-31.59 0-17.61 14.44-31.82 31.82-31.82h82.37c43.32 0 93.86-56.19 145.99-122.99l9.24 12.2c10.4 13.31 20.31 26.62 30.25 39.7-58.67 73.57-118.7 134.5-185.47 134.5h-82.38z m708.76-379.55l-52.36 52.36v0.21l-52.34 52.36c-7.46 7.23-19.41 7.23-27.08 0-4.07-4.07-5.87-9.7-5.43-14.88V363.1h-77.84c-43.32 0-93.63 56.19-145.99 122.97l-9.03-12.17c-10.37-13.31-20.31-26.62-30.69-39.72 59.13-73.55 119.14-134.71 185.7-134.71h77.84v-72.88c0-10.37 8.6-19.18 18.97-19.18 5.18 0 10.37 2.48 13.54 5.64l52.34 52.57 52.36 52.13c7.44 7.67 7.44 19.64 0.46 27.08h-0.45v-0.01z m-40.16-13.54c-19.87-19.41-39.49-39.26-59.13-58.9v117.79c19.64-19.63 39.26-39.04 59.13-58.89z m40.16 374.81h0.46c6.98-7.44 6.98-19.64-0.46-26.85l-52.36-52.35-52.34-52.36c-3.17-3.6-8.36-5.85-13.54-5.85-10.37 0-18.97 8.57-18.97 18.95v73.34h-77.84c-53.03 0-116.64-84.18-180.27-168.12-73.57-96.56-146.68-193.38-231.06-193.38h-82.38c-17.38 0-31.82 14.44-31.82 31.82 0 17.61 14.44 31.82 31.82 31.82h82.37c53.03 0 116.87 84.18 180.51 168.1 73.34 96.58 146.68 193.17 230.83 193.17h77.84v71.74c-0.44 5.43 1.36 10.84 5.43 14.9 7.67 7.44 19.62 7.44 27.08 0l52.34-52.59 52.36-52.34z m-40.16-13.31c-19.87 19.39-39.49 39.03-59.13 59.11V633.65l20.08 20.31 39.05 38.82z"
          fill="#717071"
          p-id="2677"
        ></path>
      </svg>
      <svg
        v-else-if="howListen == '循'"
        t="1670656672264"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2816"
        width="200"
        height="200"
      >
        <path
          d="M64 682.666667a21.333333 21.333333 0 0 1-21.333333-21.333334V224a53.393333 53.393333 0 0 1 53.333333-53.333333h812.5l-48.92-48.913334a21.333333 21.333333 0 0 1 30.173333-30.173333l85.333334 85.333333a21.333333 21.333333 0 0 1 0 30.173334l-85.333334 85.333333a21.333333 21.333333 0 0 1-30.173333-30.173333l48.92-48.913334H96a10.666667 10.666667 0 0 0-10.666667 10.666667v437.333333a21.333333 21.333333 0 0 1-21.333333 21.333334z m100.42 249.753333a21.333333 21.333333 0 0 0 0-30.173333L115.5 853.333333H928a53.393333 53.393333 0 0 0 53.333333-53.333333V362.666667a21.333333 21.333333 0 0 0-42.666666 0v437.333333a10.666667 10.666667 0 0 1-10.666667 10.666667H115.5l48.92-48.913334a21.333333 21.333333 0 0 0-30.173333-30.173333l-85.333334 85.333333a21.333333 21.333333 0 0 0 0 30.173334l85.333334 85.333333a21.333333 21.333333 0 0 0 30.173333 0z"
          fill="#5C5C66"
          p-id="2817"
        ></path>
      </svg>
      <svg
        v-else
        t="1670656729585"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2962"
        width="200"
        height="200"
      >
        <path
          d="M64 682.666667a21.333333 21.333333 0 0 1-21.333333-21.333334V224a53.393333 53.393333 0 0 1 53.333333-53.333333h812.5l-48.92-48.913334a21.333333 21.333333 0 0 1 30.173333-30.173333l85.333334 85.333333a21.333333 21.333333 0 0 1 0 30.173334l-85.333334 85.333333a21.333333 21.333333 0 0 1-30.173333-30.173333l48.92-48.913334H96a10.666667 10.666667 0 0 0-10.666667 10.666667v437.333333a21.333333 21.333333 0 0 1-21.333333 21.333334z m100.42 249.753333a21.333333 21.333333 0 0 0 0-30.173333L115.5 853.333333H928a53.393333 53.393333 0 0 0 53.333333-53.333333V362.666667a21.333333 21.333333 0 0 0-42.666666 0v437.333333a10.666667 10.666667 0 0 1-10.666667 10.666667H115.5l48.92-48.913334a21.333333 21.333333 0 0 0-30.173333-30.173333l-85.333334 85.333333a21.333333 21.333333 0 0 0 0 30.173334l85.333334 85.333333a21.333333 21.333333 0 0 0 30.173333 0zM554.666667 618.666667V405.333333a21.333333 21.333333 0 0 0-21.333334-21.333333h-42.666666a21.333333 21.333333 0 0 0 0 42.666667h21.333333v192a21.333333 21.333333 0 0 0 42.666667 0z"
          fill="#5C5C66"
          p-id="2963"
        ></path>
      </svg>
    </div>
    <div class="player-svg" :class="isUnfoldList?'select':''" @click.stop="unfoldListHandler">
      <svg
        t="1670328786221"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="3968"
        width="200"
        height="200"
      >
        <path
          d="M902.779659 795.440467c-6.179746-6.181793-14.304797-9.577123-22.950711-9.577123L129.341299 785.863345c-17.945721 0-32.540114 14.59644-32.540114 32.525788 0 17.962094 14.594393 32.555463 32.540114 32.555463l750.487649 0c17.931395 0 32.525788-14.594393 32.525788-32.555463C912.354735 809.745265 908.959406 801.61919 902.779659 795.440467"
          p-id="3969"
        ></path>
        <path
          d="M879.828948 461.055724 129.341299 461.055724c-17.945721 0-32.525788 14.594393-32.525788 32.541137 0 17.930371 14.580067 32.525788 32.525788 32.525788l750.487649 0c17.931395 0 32.525788-14.594393 32.525788-32.525788 0-8.647961-3.39533-16.800641-9.575076-22.980387C896.599913 464.436728 888.474862 461.055724 879.828948 461.055724"
          p-id="3970"
        ></path>
        <path
          d="M902.779659 154.426115c-6.179746-6.179746-14.304797-9.574053-22.950711-9.574053L129.341299 144.852062c-17.945721 0-32.540114 14.594393-32.540114 32.540114 0 17.946744 14.594393 32.525788 32.540114 32.525788l750.487649 0c17.931395 0 32.525788-14.579043 32.525788-32.525788C912.354735 168.745239 908.959406 160.606885 902.779659 154.426115"
          p-id="3971"
        ></path>
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  name: "PlayerComponent",
  props: {
    songId: {
      type: Number,
      default: -1,
    },
    isStop: {
      type: Boolean,
      default: false,
    },
    currentTime: {
      type: Number,
      default: 0,
    },
    duration: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      isStopPlay: false,
      listItem: null,
      isFollow: true,
      timer: null,
      listenStrategy: ["随", "循", "单"],
      howListen: "随",
      isUnfoldList:false
    };
  },
  computed: {
    thisTime() {
      return this.isFollow ? this.currentTime : 0;
    },
  },
  watch: {
    songId() {
      this.listItem = JSON.parse(localStorage.getItem("listItem"));
      console.log(this.listItem);
    },
    isStop(val) {
      this.isStopPlay = val;
    },
    thisTime(val) {
      this.$refs.input.value = val;
      if (val != 0) {
        this.$refs.progessshow.style.width = `${
          (this.$refs.input.value / this.duration) * 100
        }%`;
      }
    },
  },
  methods: {
    sloveStatus() {
      this.isStopPlay = !this.isStopPlay;
      this.$emit("postMessage", { isStopPlay: this.isStopPlay });
    },
    sloveTimeHandler() {
      clearTimeout(this.timer);
      this.$refs.progessshow.style.width = `${
        (this.$refs.input.value / this.duration) * 100
      }%`;
      this.timer = setTimeout(() => {
        this.isFollow = true;
        this.$emit("timeChange", Number.parseInt(this.$refs.input.value));
      }, 500);
    },
    changeListen() {
      let index = this.listenStrategy.findIndex(
        (value) => value == this.howListen
      );
      if (index == this.listenStrategy.length - 1) index = -1;
      this.howListen = this.listenStrategy[index + 1];
      this.$emit("listenStrategy", this.howListen);
    },
    unfoldListHandler(){
      this.$emit('sloveListShow');
      this.isUnfoldList = !this.isUnfoldList;
    }
  },
};
</script>

<style lang="scss" scoped>
.player {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0.05rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(223, 52, 54, 0.1) 10%,
    rgba(255, 255, 255, 0)
  );
  .player-img {
    width: 0.5rem;
    min-width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    overflow: hidden;
  }
  .player-song {
    flex-grow: 1;
    height: 100%;
    margin: 0 0.05rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .player-text {
      font-size: 0.13rem;
      margin-bottom: 0.04rem;
    }
    .progess {
      position: relative;
      height: 0.06rem;
      border-radius: 0.03rem;
      overflow: hidden;
      label {
        width: 100%;
        height: 100%;
      }
      input {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
      .progess-show {
        position: absolute;
        left: 0;
        top: 0;
        width: 0%;
        height: 100%;
        background-color: rgba($color: #d43c33, $alpha: 0.8);
      }
      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: #ebc2c0;
      }
    }
    .control {
      margin-top: 0.02rem;
      width: 100%;
      height: 0.2rem;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      path{
          fill: #717071;
        }
      div {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 0.2rem;
        height: 0.2rem;
        svg {
          width: 0.2rem;
          height: 0.2rem;
        }
      }
      .control-midle{
        .icon1{
          width: 0.18rem;
          height: 0.18rem;
        }
      }
    }
  }
  .player-progress {
    position: relative;
    width: 0.5rem;
    height: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    >svg{
      width: 0.2rem;
      height: 0.2rem;
    }
  }
  .player-svg {
    width: 0.18rem;
    height: 0.18rem;
    > svg {
      width: 100%;
      height: 100%;
      path {
        fill: #717071;
      }
    }
  }
  .select{
    >svg{
      path{
        fill: #d43c33;
      }
    }
  }
}
</style>